<h1 class="layui-inline">权限分配</h1>
<hr class="layui-bg-black">
<table id="tb_users" class="layui-table" lay-filter="users">
</table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">分配权限</a>
</script>

<script type="text/html" id="hidden_edit_auths">
    <form id="form_edit_auths" class="layui-form" style="margin: 15px 30px 20px;">
        <input type="hidden" name="role_id"/>
        <div class="layui-form-item" id="auth_checkbox">

        </div>
        <div style="text-align: right;">
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            <button class="layui-btn" lay-submit="" lay-filter="edit_auths">
                提交
            </button>
        </div>
    </form>
</script>
<script>

    layui.use('table', function () {
        var table = layui.table;
        table.render({
            elem: '#tb_users',
            url: "/auth/auths.do",
            page: true,
            id: 'idTest',
            cols: [[
                {field: 'id', width: 80, sort: true, title: '编号'},
                {field: 'role', sort: true, width: 120, title: '角色名'},
                {
                    field: 'auths', title: '权限列表', templet: function (d) {
                        var tem = "";
                        $.each(d.auths, function (index, item) {
                            tem = tem + item.name + "；";
                        })
                        return tem;
                    }
                },
                {fixed: 'right', width: 180, align: 'center', title: '操作', toolbar: '#barDemo'}
            ]]
        });
        table.on('tool(users)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                layui.use("layer", function () {
                    layer.open({
                        title: "分配权限"
                        , type: 1
                        , content: $("#hidden_edit_auths").html()
                        , success: function () {
                            layui.use(['form'], function () {
                                var form = layui.form;
                                $("input[name=role_id]").val(data.id);
                                var checkBox = '<input type="checkbox" name="auths" title="[[name]]" value="[[id]]">';
                                $.get("/auth/allauths.do", function (data_all) {
                                    $.each(data_all, function (intdx, item) {
                                        $("#auth_checkbox").append(checkBox.replace("[[name]]", item.name).replace("[[id]]", item.id));
                                    })

                                    $.each(data.auths, function (index, item) {
                                        $("input[value=" + item.id + "]").attr("checked", "checked");
                                    });

                                    form.render();
                                });

                                form.on("submit(edit_auths)", function (data) {
                                    var fm = $("#form_edit_auths");
                                    var load = layer.load(1, {shade: 0.3});
                                    $.post("/auth/edit_auths.do", fm.serialize(), function (res) {
                                        layer.close(load);
                                        if (res.code == 1) {
                                            layer.closeAll();
                                            layer.msg("权限修改成功！", {icon: 1});
                                            table.reload("idTest")
                                        } else {
                                            layer.msg(res.msg, {icon: 2});
                                        }
                                    });
                                    return false;
                                })
                            })
                        }
                    });
                });
            }
        });
    });
</script>